/*
 * File    : /src/views/mark/meditor/components/PictureList/MPictureAnnoItem
 * Time    : 2021-09-13 10:54:22
 * Author  : Gray Snail
 * Version : 1.0
 * Contact : shtao2011@sina.com
 * License : Copyright (c) 2021 Gray Snail
 * Desc    : 已标注的结果展示
 */

import { BaseAnno } from './tools/base'
import { AnnoRect } from './tools/rect'
import { Annotation, AnnoType } from './data/annotation'
import paper from 'paper'

const data_bind = (data, item) => {}
const data_unbind = (data, item) => {}
const pipe = (project) => {
  project.layers.forEach((layer) => {
    if (layer.name === 'mainLayer') return
    layer.children.forEach((item) => {
      if (item instanceof BaseAnno) {
        item.remove()
        item.project.deselectAll()
        // item.layer.removeChildren()
      }
    })
  })
}

const createAnnoPath = (layer, annoData) => {
  let annoPath = null
  const pts = new Array(annoData.x.length)
  for (let i = 0; i < pts.length; i++) {
    pts[i] = { x: annoData.x[i], y: annoData.y[i] }
  }
  if (annoData.z === AnnoType.RECT) {
    annoPath = new AnnoRect(pts[0], pts[1])
    // } else if (annoData.z === AnnoType.RECT_PT) {

    // }
  } else {
    console.log('TODO')
  }

  if (layer && annoPath) layer.addChild(annoPath)
  return annoPath
}

const initLayer = (project, annoData) => {
  const layerName = annoData.z + 'Layer'
  if (project.layers[layerName]) {
    return project.layers[layerName]
  }
  const layer = new paper.Layer({ name: layerName })
  project.addLayer(layer)
  return layer
}

export default {
  name: 'MImageMarkerAnnotations',

  inject: ['getProject', 'mImageMarker'],
  props: {
    data: {
      type: [Array, Object],
      default: () => [],
    },
    selected: {
      type: Object, // 选中的 anno
    },
  },
  computed: {},

  created() {
    // this.getProject((project) => {
    //   console.log('@@@@@@@@@@@@@@@@@@@')
    //   console.log(this.data)
    // })
  },
  render(h) {
    return null
  },
  methods: {
    drawAnnotation(annoList, project) {
      annoList.forEach((annoData) => {
        const layer = initLayer(project, annoData)
        const annoPath = createAnnoPath(layer, annoData)
        annoPath.annotation = annoData
      })

      // console.log(this)
      // anno List 是相应式变量
      // 添加一个 可以修改 annoPath的Watcher
    },

    clear(project) {
      console.log(project)
      // step1: 根据新旧数据计算需要清除的
      // step2: 清除画布
      // step3: 解除绑定关系

      project.layers.forEach((layer) => {
        if (layer.name === 'mainLayer') return
        layer.children.forEach((item) => {
          if (item instanceof BaseAnno) {
            item.remove()
            // item.layer.removeChildren()
          }
        })
      })
    },

    setSelectedItem(project, anno) {
      if (!anno || anno.fileName !== project.fileName) return
      project.deselectAll()
      const layer = initLayer(project, anno)
      const annoPath = layer.children.find((item) => item.annotation === anno)
      if (annoPath) {
        annoPath.selected = true
      }
      const oldSelected = project.selectedItem
      if (oldSelected?.annotation !== anno) {
        project?.onSelectedChange(anno)
        project.selectedItem = annoPath
      }
    },
  },
  watch: {
    data(newVal, oldval) {
      // wait for  loading image
      // render 中的会响应式?
      // deep true: 可以在数组项变化的时候获取数据
      // 如何确定是否相等

      console.log('@@@@@@@@@@@@@@@@@@@')

      this.getProject((project) => {
        // console.log(project.fileName)
        // console.log(this.data)
        this.clear(project)
        this.drawAnnotation(this.data, project)
      })
    },
    selected(val) {
      // console.log(val)
      this.getProject((project) => this.setSelectedItem(project, val))
    },
  },
}
